<template>
  <a-drawer
    title="合同续租"
    :maskClosable="true"
    :visible="visible"
    :width="$store.getters.isMobile ? 350 : 450"
    :body-style="{ paddingBottom: '80px' }"
    @close="closeModal"
  >
    <a-row :gutter="[0, 12]">
      <a-col :span="24">
        <a-alert
          message="提示"
          type="info"
          show-icon
        >
          <template #description>
            <div>
              1.合同续租，将使用原有条款新建合同，审批通过后新合同将在租期起日开始执行。
            </div>
            <div>
              2.保证金费用类型账单将自动结转至新合同的保证金账单。
            </div>
          </template>
        </a-alert>
      </a-col>
      <a-col :span="24">
        <div class="text-title">租期起止</div>
        <a-range-picker
          v-model:value="timeArr"
          style="width: 100%"
          class="mt-10"
          :disabled-date="disabledDate"
          valueFormat="YYYY-MM-DD"
        />
      </a-col>
    </a-row>
    <div class="drawer-footer">
      <a-button class="mr-10" @click.prevent="closeModal">取消</a-button>
      <a-button type="primary" @click.prevent="onSubmit">确定</a-button>
    </div>
  </a-drawer>
</template>
<script>
import { defineComponent, reactive, toRefs, watch } from "@vue/runtime-core";
import { message } from "ant-design-vue";
import moment from "moment";
import { useRouter } from "vue-router";
import store from "../../../../store";

export default defineComponent({
  name: "RenewalLease",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const $router = useRouter();
    const state = reactive({
      contractEndTime: "",
      timeArr: [],
      originId: 0,
      duration: 0,
    });

    const disabledDate = (current) => {
      return current && current < moment(state.contractEndTime).endOf("day");
    };

    const closeModal = () => {
      emit("cancel");
    };
    const closeAllModal = () => {
      emit("closeAllModal");
    };

    const onSubmit = () => {
      if (!state.timeArr.length) {
        message.warning("请选择合同续租起止日期");
        return;
      }
      closeAllModal();
      if (window.__MICRO_APP_ENVIRONMENT__) {
        window.microApp.forceDispatch({
          type: "SetMicroPages",
          microInfo: {
            microId: `org_add_contract_${state.originId}_renewal`,
            app: 'org',
            name: `合同续租【${store.getters.contractDetail.owner_name}】`,
            url: `/contract/addContract?id=${state.originId}&startDate=${state.timeArr[0]}&endDate=${state.timeArr[1]}&duration=${state.duration}&editType=renewal`,
          }
        })
      }
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          const detail = store.getters.contractDetail;
          state.originId = detail.id;
          state.contractEndTime = detail.retreat_time || detail.lease_endtime;
          let compareEndDay = detail.lease_endtime;
          let compareStartDay = detail.lease_starttime;
          let duration = moment
            .duration(
              moment(compareEndDay).diff(moment(compareStartDay))
            )
            .asDays();  // 天数
          const durationYears = moment
            .duration(
              moment(compareEndDay).diff(moment(compareStartDay))
            ).years();
          const durationMonths = moment
            .duration(
              moment(compareEndDay).diff(moment(compareStartDay))
            ).months();
          const durationDays = moment
            .duration(
              moment(compareEndDay).diff(moment(compareStartDay))
            ).days();
          if (durationYears > 0 && durationMonths <= 0 && durationDays <= 0) {
            // 整年
            duration = moment
              .duration(
                (moment(compareEndDay)
                  .add(durationYears, "years")).diff(moment(compareEndDay))
              )
              .asDays()
          } else if (durationMonths > 0 && durationDays <= 0) {
            let months = durationYears*12 + durationMonths;
            // 整月
            duration = moment
              .duration(
                (moment(compareEndDay)
                  .add(months, "months")).diff(moment(compareEndDay))
              )
              .asDays()
          }
          state.duration = duration;
          const startDate = moment(state.contractEndTime)
            .add(1, "days")
            .format("YYYY-MM-DD");
          const endDate = moment(state.contractEndTime)
            .add(duration, "days")
            .format("YYYY-MM-DD");
          state.timeArr = [startDate, endDate];
        }
      }
    );
    return {
      disabledDate,
      ...toRefs(state),
      closeModal,
      onSubmit,
    };
  },
});
</script>
